<template>
  <div>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="apps-o">理疗师</van-tabbar-item>
      <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">订单</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>

    <!--    轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/11896f1119d943e8879b2bc9f1e8792c.jpg" alt="Image 2">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/12/10/517470981b9a437ca69ae75bd340df6dlazy%7E%E5%92%A9%E5%92%A9%20.jpg" alt="Image 3">
      </van-swipe-item>
      <van-swipe-item>
        <img src="
https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/12/09/76f46e357c054039bb93892a056820574.jpg" alt="Image 4">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/jyyx/2024/7/31/ad0a1153ea924f6b9211486108ef8c9a.jpg" alt="Image 5">
      </van-swipe-item>
    </van-swipe>



    <van-tabs v-model="activeTab">
      <van-tab title="综合排序" />
      <van-tab title="价格" />
      <van-tab title="销量" />
      <van-tab title="好评" />
    </van-tabs>



    <div class="order-details-container"  >
      <!-- 动态渲染每个派单 -->
      <div v-for="(item, index) in services" :key="index" class="order-details" >
        <!-- 图片和内容部分 -->
        <div class="order-info-content" @click="detail(item.id)">
          <!-- 左侧图片 -->
          <div class="order-image">
            <img :src="item.photo" alt="Item Image"/>
          </div>
          <!-- 右侧内容 -->
          <div class="order-text">
            <span class="title">{{ item.name }}</span>
            <span class="hospital"> {{ item.effect }}</span>
            <div>
              <span class="appointment-time">{{ item.price }}</span>
              <span class="patient-info">
              {{ item.minutes }}
            </span>
            </div>

            <span class="order-choose">已有{{item.choose}}选择</span>
          </div>
        </div>
        <div class="order-footer">
          <button class="accept-btn" @click="toCategory()">选理疗师</button>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
import { ref } from 'vue';
import { Cell, Button } from 'vant';
import axios from "axios"
// import {query} from "vue/src/platforms/web/util";
export default {
  data() {
    return {
      active: 0,
      activeTab:0,
      services: [],
    };
  },
  created() {
    this.findAll();
  },
  methods: {
    toCategory(){
      this.$router.push({path:'/category'})
    },
    // goToDetail(id){
    //   console.log(id)
    //   this.$router.push({path:'detail',query:{id:id}});
    // },
    detail(id){
      console.log("打印的id:"+id)
      this.$router.push({path:'detail', query: {id: id}});
    },

    findAll(){
      axios.post("http://localhost:10086/homepage/findList", this.services).then(res => {
        this.services = res.data;
        console.log(res.data);
})
    }
  },
}
</script>

<style>
.my-swipe .van-swipe-item {
  height: 200px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: rgba(57, 195, 237, 0.94);
}


img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-details-container {
                     border: 1px solid #ccc;
                     padding: 10px;
                     margin-bottom: 10px;
                   }
.order-details {
           display: flex;
           flex-direction: column;
           border-bottom: 1px solid #ccc;
           padding-bottom: 10px;
           margin-bottom: 10px;
         }
.order-info-content {
                  display: flex;
                  align-items: center;
                }
.order-image {
           width: 150px;
           height: 150px;
           object-fit: cover;
           margin-right: 10px;
         }
.order-text {
           display: flex;
           flex-direction: column;
         }
.title {
  font-size: 18px;
  margin-bottom: 5px;
}
.hospital {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
.appointment-time {
  font-size: 16px;
  color: red;
  margin-bottom: 5px;
}
.patient-info {
             font-size: 14px;
             margin-bottom: 5px;
           }
.order-choose {
           font-size: 14px;
           color: #666;
         }
.order-footer {
           align-self: flex-end;
         }
.accept-btn {
            background-color: green;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
          }
</style>
